<template>
    <div  class="cz">
        <div class="zz">注册</div>
    <van-form @submit="onSubmit">
        <van-field
                v-model="username"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"/>
        <van-field
                v-model="phonenumber"
                name="手机号"
                label="手机号"
                placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"/>
        <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"/>
        <van-field
                v-model="passwordto"
                name="重复密码"
                label="重复密码"
                placeholder="重复密码"
                :rules="[{ required: true, message: '请填写重复密码' }]"/>
        <van-field
                v-model="sms"
                center
                clearable
                label="短信验证码"
                placeholder="请输入短信验证码">
                <template #button>
                    <van-button size="small" type="info" @click="dlyzm">发送验证码</van-button>
                </template>
        </van-field>

        <div style="margin: 16px;">
            <van-button round block type="danger" native-type="submit" @click="onClick">提交</van-button>
        </div>
    </van-form>
        <div class="dl" >已有账号？<router-link to="/login">点击登录</router-link></div>
    </div>
</template>

<script>
    import axios from 'axios'
    import {login} from "@/api/zhuce.js";
    import { Notify } from 'vant';
    export default {
        name: "zhuce",
        data() {
            return {
                username: '',
                password: '',
                phonenumber:'',
                passwordto:'',
                sms:'',

            };
        },
        methods: {
            onSubmit(values){
                console.log('submit', values);
            },
            dlyzm(){
                //使用axios获取验证码
                //获取用户输入手机号
                axios({
                    url:"http://192.168.40.177:8008/api/register/verify",
                    method:"post",
                    data:{
                        phone:this.phonenumber,
                        type:"register"
                    }
                }).then(res=>{
                   //this.sms=res.data.data
                    var da =res.data
                    var success =da.success
                    var msg = da.data
                    var data =da.data
                    if(success == true) {
                        //成功获取验证码
                        //显示到页面输出
                        this.sms =data
                    }else {
                        //失败 提示用户信息
                        //失败 提示用户信息
                        Notify(msg);
                    }

                })
            },
            onClick(){
                // console.log("用户点击了提交按钮")
                //用户输入的用户名和密码
                var username = this.$data.username
                var password =this.$data.password
                var phonenumber =this.$data.phonenumber
                var passwordto =this.$data.passwordto
                var sms=this.$data.sms
                 var data ={
                     nickname:username,
                     password:password,
                     account:phonenumber,
                     passwordto:passwordto,
                     captcha:sms,
                }
                //模块化
                login(data).then(res =>{
                    var  da =res.data

                    var success = da.success
                    var msg =da.msg

                    if(success == true) {
                        //注册成功
                        this.$router.replace("login")

                    }else {
                          //注册失败
                          //提示用户 注册失败并告知登录失败的原因
                          Notify(msg);
                        }
                    // this.$router.replace("login")//跳转
                })

                // djdl(){
            //     this.$router.push({
            //         path: '/login',
            //     })
             }
        },
    };
</script>

<style scoped>
    .zz{
        margin: 0 0  40px 0;
        color: #0c0c0c;}
    .cz{
        margin: 180px 0 5px  20px;
        font-size: 24px;
    }
    van-form{
        width: 350px;
        margin: 0 auto;
    }
    .dl{
        position: absolute;
        left: 20px;
        bottom: 10px;
        width: 100%;
        font-size: 5px;
        color: #606266;
        text-align: center;

    }

</style>